/**
* 左边菜单
*/
<template>
	<el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path"
		unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
		active-text-color="#ffd04b">
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>

		<el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">

			<template slot="title">
				<i class="iconfont" :class="menu.icon"></i>
				<span> {{menu.menuname}}</span>
			</template>

			<!-- 列表渲染子功能 -->
			<el-menu-item-group>
				<el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
					<i class="iconfont" :class="chmenu.icon"></i>
					<span> {{chmenu.menuname}}</span>
				</el-menu-item>
			</el-menu-item-group>

		</el-submenu>

	</el-menu>
</template>
<script>
	import {
		menu
	} from '../api/getData'
	export default {
		name: 'leftnav',
		data() {
			return {
				collapsed: false,
				allmenu: []
			}
		},
		// 创建完毕状态(里面是操作)
		created() {
			// 获取图形验证码
			let res = {
				success: true,
				data: [{
						menuid: 10,
						icon: 'el-icon-document-copy',
						menuname: '教学基础数据管理',
						hasThird: null,
						url: null,
						menus: [{
								menuid: 11,
								icon: 'el-icon-collection',
								menuname: '班级管理',
								hasThird: 'N',
								url: 'basedata/class',
								menus: null
							},
							{
								menuid: 12,
								icon: 'el-icon-reading',
								menuname: '课程管理',
								hasThird: 'N',
								url: 'basedata/course',
								menus: null
							},
							{
								menuid: 13,
								icon: 'el-icon-user',
								menuname: '学生管理',
								hasThird: 'N',
								url: 'basedata/student',
								menus: null
							},
						]
					},
					{
						menuid: 20,
						icon: 'el-icon-date',
						menuname: '考务管理',
						hasThird: null,
						url: null,
						menus: [
						{
							menuid: 21,
							icon: 'el-icon-edit',
							menuname: '考试科目管理',
							hasThird: 'N',
							url: 'examination/exam',
							menus: null
						}]
					},
					{
						menuid: 30,
						icon: 'el-icon-notebook-1',
						menuname: '教材管理',
						hasThird: null,
						url: null,
						menus: [{
							menuid: 31,
							icon: 'el-icon-notebook-2',
							menuname: '新书入库管理',
							hasThird: 'N',
							url: 'textbook/textbook',
							menus: null
						}]
					},
					{
						menuid: 40,
						icon: 'el-icon-data-analysis',
						menuname: '教室数据管理',
						hasThird: null,
						url: null,
						menus: [
							
							{
								menuid: 41,
								icon: 'el-icon-data-board',
								menuname: '教室管理',
								hasThird: 'N',
								url: 'classroomdata/classroom',
								menus: null
							}
						]
					},				
					{
						menuid: 50,
						icon: 'el-icon-set-up',
						menuname: '专升本信息管理',
						hasThird: null,
						url: null,
						menus: [{
							menuid: 51,
							icon: 'el-icon-thumb',
							menuname: '专升本审核',
							hasThird: 'N',
							url: 'promotion/checking',
							menus: null
						}, {
							menuid: 52,
							icon: 'el-icon-pie-chart',
							menuname: '数据可视化',
							hasThird: 'N',
							url: 'promotion/statistics',
							menus: null
						}]
					}
				],
				msg: 'success'
			}
			this.allmenu = res.data

			// menu(localStorage.getItem('logintoken'))
			//   .then(res => {
			//     console.log(JSON.stringify(res))
			//     if (res.success) {
			//       this.allmenu = res.data
			//     } else {
			//       this.$message.error(res.msg)
			//       return false
			//     }
			//   })
			//   .catch(err => {
			//     this.$message.error('菜单加载失败，请稍后再试！')
			//   })
			// 监听
			this.$root.Bus.$on('toggle', value => {
				this.collapsed = !value
			})
		}
	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 240px;
		min-height: 400px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
		text-align: left;
	}

	.el-menu-item-group__title {
		padding: 0px;
	}

	.el-menu-bg {
		background-color: #1f2d3d !important;
	}

	.el-menu {
		border: none;
	}

	.logobox {
		height: 40px;
		line-height: 40px;
		color: #9d9d9d;
		font-size: 20px;
		text-align: center;
		padding: 20px 0px;
	}

	.logoimg {
		height: 40px;
	}
</style>
